<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="addRole">
                    <i class="layui-icon">&#xe608;</i> 添加角色
                </button>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-role-manage" lay-filter="LAY-role-manage"></table>
        </div>
    </div>
</div>

<script type="text/html" id="table-tool">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script type="text/html" id="toolBar">

</script>

<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../layuiadmin/lib/juicer-min.js"></script>

<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'roles', 'table', 'setter', 'auth', 'AppHelper', 'routerHelper'], function () {
        var $ = layui.$
            , form = layui.form
            , roles = layui.roles
            , setter = layui.setter
            , table = layui.table
            , routerHelper = layui.routerHelper
            , AppHelper = layui.AppHelper
            , LayerPage = AppHelper.getLayerPage()
        ;


        //初始化表格
        var currentTable = table.render({
            elem: "#LAY-role-manage",
            url: setter.apiHost + "/admin/api/role/list",
            page: false,
            limit: 20,
            request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pagesize' //每页数据量的参数名，默认：limit
            }
            , cols: [[
                {title: "ID", field: 'id', width: 40}
                , {title: "角色名称", field: 'roleName'}
                , {title: "创建时间", field: 'createTime', width: 200}
                , {fixed: 'right', title: "操作", align: 'center', toolbar: '#table-tool', width: 200}
            ]]
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res)
                return {
                    "status": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "total": res.data.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , response: {
                statusName: 'status' //规定数据状态的字段名称，默认：code
                , statusCode: 200 //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , countName: 'total' //规定数据总数的字段名称，默认：count
                , dataName: 'data' //规
            }
        });
        // var openRoleForm = function (params) {
        //     var dp = {
        //         action: "add"
        //         , title: "新建角色"
        //         , id: null
        //     }
        //
        //     var options = $.extend({}, dp, params);
        //
        //     var path = routerHelper.jump({
        //         path: "role_form.html"
        //         , query: {
        //             action: options.action
        //             , id: options.id
        //         }
        //     })
        //     layer.open({
        //         type: 2
        //         , title: options.title
        //         , area: ["90%", "90%"]
        //         , content: path
        //         , btn: ['确认', '取消']
        //         , btnAlign: "c"
        //         , success: function (layero, index) {
        //             layer.full(index);
        //         }
        //         , yes: function (index, layero) {
        //             var body = layer.getChildFrame('body', index);
        //             var submit = layero.find("iframe").contents().find("#roleFormSubmit");
        //             $(submit).trigger('click');
        //         }
        //     })
        // }

        //新建按钮
        $("#addRole").on("click", function () {
            var path = routerHelper.jump({
                path: "role_form.html"
                , query: {
                    action: "add"
                }
            })

            LayerPage.open({
                path:path
                ,title:"新建角色"
                ,iframeSubmitId:"#roleFormSubmit"
            })

        })

        table.on("tool(LAY-role-manage)", function (obj) {
            var event = obj.event;
            var data = obj.data;
            var id = data.id;

            switch (event) {
                case "edit":
                    var path = routerHelper.jump({
                        path: "role_form.html"
                        , query: {
                            action: "edit"
                            ,id:id
                        }
                    })

                    LayerPage.open({
                        path:path
                        ,title:"编辑角色"
                        ,iframeSubmitId:"#roleFormSubmit"
                    })
                    //
                    // openRoleForm({
                    //     action: "edit"
                    //     , title: "编辑角色"
                    //     , id: id
                    // })
                    break;
                case "del":
                    layer.confirm("您确定要删除吗？删除后不可恢复!", {icon: 0}, function (index) {
                        var loadIndex = layer.load(2);
                        roles.del(id).always(function () {
                            layer.close(loadIndex);
                        }).done(function (res) {
                            if (res.data > 0) {
                                layer.msg("删除成功!", {icon: 1});
                            }
                            layer.close(index);
                            currentTable.reload();
                        });
                    })
                    break;
            }
        })

    });
</script>
</body>
</html>
